<template>
    <a-modal width="700px" :footer="null" :maskClosable="false" :closable="false" :mask="false" v-model:open="modalShow"
        :wrap-style="{ overflow: 'hidden' }">
        <template #title>
            <modalTitle @close="close" :title="'监控报警信息接收人员统计'" :isSearchInput="true" @search="search"></modalTitle>
        </template>
        <div style="padding:0 10px 10px 10px;">
            <mTable :titleData="titleData" :valueData="valueData"></mTable>
            <modalPage ref="pageRef" @pageChange="pageChange" :total="total"></modalPage>
        </div>
    </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref, watch } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"
const modalShow = ref(false)
const titleData = [
    {
        name: "编号",
        key: "id",
        style: {
            width: "40px"
        }
    },
    {
        name: "报警类型",
        key: "type_text",
        style: {
            width: "80px"
        }
    },
    {
        name: "监控编号",
        key: "device_no",
        style: {
            width: "80px"
        }
    },
    {
        name: "监控名称",
        key: "name",
        style: {
            width: "80px"
        }
    }, {
        name: "监控位置",
        key: "event_address",
        style: {
            width: "80px"
        }
    }, {
        name: "一级处理人(低风险)",
        key: "clr_0",
        style: {
            width: "80px"
        }
    }, {
        name: "二级处理人(中风险)",
        key: "clr_1",
        style: {
            width: "80px"
        }
    }, {
        name: "三级处理人(高风险)",
        key: "clr_2",
        style: {
            width: "80px"
        }
    }, {
        name: "四级处理人(高风险)",
        key: "clr_3",
        style: {
            width: "80px"
        }
    }


]
const valueData = ref([])

const emit = defineEmits(["rowClick", "close"])
const rowClick = (e) => {
    emit("rowClick", e)
}
const close = () => {
    modalShow.value = false
    emit("close")
}
const pageRef = ref(null)

const show = (e) => {
    if (e) {
        searchData.value.is_solve = e
    }
    getList()
    modalShow.value = true
}

const total = ref(0)
const pageChange = (e) => {
    searchData.value.page = e
    getList()
}

const searchData = ref({
    pagesize: 10,
    page: 1,
    keywords: "",
    is_page: 1
})

const search = (e) => {
    searchData.value.keywords = e
    getList()
}


const getList = async () => {
    const res = await $api.get("/api/index/get_jiankong_list", searchData.value)
    if (res.code === 1) {
        total.value = res.data.total
        valueData.value = res.data.data
        if (valueData.value.organization_names.length) {
            valueData.value.organization_names.forEach((item, index) => {
                valueData.value[`clr_${index}`] = item
            })
        }
    }
}
defineExpose({ show, close })
</script>
<style scoped lang="less">
.title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;

    .title-btn {
        padding: 6px 20px;
        background: #4DDECF40;
        border: 1px solid #4DDECF;
        border-radius: 99px;
        color: #fff;
    }
}

.top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item_active {
        border: 2px solid #1E6579;
    }

    .top_item {
        width: 120px;
        padding: 3px 10px 3px 3px;
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);

        // border: 1px solid;
        // border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);
        .top_item_name {
            font-size: 10px;
            color: rgba(213, 242, 255, 1);
            flex: 1;
        }

        .top_item_num {
            color: rgba(158, 247, 255, 1);
            font-weight: bold;
            font-size: 12px;
        }

        .top_item_leftIcon {
            background-image: url('/img/myimg/lefticon1.png');
            background-size: 17px 15px;
            width: 17px;
            height: 15px;
        }
    }
}
</style>

<style></style>
